<template>
  <div class="task-management-container">
    <vab-query-form class="page-header">
      <vab-query-form-top-panel>
        <el-form inline label-width="100px" :model="queryForm" @submit.prevent>
          <el-form-item label="任务名称">
            <el-input v-model.trim="queryForm.LIKE_jobName" clearable placeholder="请输入任务名称" />
          </el-form-item>
          <el-form-item label="任务分组">
            <CommonSelect v-model="queryForm.EQ_jobGroup" dict-code="sys_job_group" placeholder="请选择任务分组" />
          </el-form-item>
          <el-form-item label="状态">
            <CommonSelect v-model="queryForm.EQ_status" dict-code="sys_job_status" placeholder="请选择状态" />
          </el-form-item>
          <el-form-item>
            <el-button :icon="Search" type="primary" @click="queryData"> 查询 </el-button>
          </el-form-item>
        </el-form>
      </vab-query-form-top-panel>
    </vab-query-form>
    <el-row :gutter="15">
      <el-col v-for="item in list" :key="item.id" :lg="6" :md="8" :sm="12" :xl="6" :xs="24">
        <el-card class="task-item vab-card" shadow="hover">
          <template #header>
            <el-icon @click="handleEdit(item)"><Edit /></el-icon>
            <el-icon @click="handleDelete(item)"><Delete /></el-icon>
            {{ item.jobName }}
            <el-tag v-if="item.status == 1" class="card-header-tag" type="success"> 已开启 </el-tag>
            <el-tag v-else class="card-header-tag" type="danger">已停用</el-tag>
          </template>
          <img class="login-left-img" src="@/assets/images/task.png" alt="login" @click="handleHistory(item)" />

          <div class="task-item-bottom">
            <span>cron表达式: {{ item.cronExpression }}</span>
            <el-popconfirm title="您确定要执行吗?" @confirm="handlePlay(item)">
              <template #reference>
                <el-button v-if="item.status == 0" circle type="warning">
                  <el-icon><VideoPause /></el-icon>
                </el-button>
                <el-button v-else circle type="primary">
                  <el-icon><VideoPlay /></el-icon>
                </el-button>
              </template>
            </el-popconfirm>
          </div>
        </el-card>
      </el-col>
      <el-col :lg="6" :md="8" :sm="12" :xl="6" :xs="24">
        <el-card class="task-item task-add" shadow="hover" @click="handleAdd">
          <el-icon><CirclePlus /></el-icon>
          <p>添加任务</p>
        </el-card>
      </el-col>
    </el-row>
    <edit ref="editRef" @on-success="fetchTableData" />
    <detail ref="detailRef" />
    <hitory ref="hitoryRef" />
  </div>
</template>

<script setup lang="tsx" name="JobList">
import { Search } from "@element-plus/icons-vue";
import { postRequest, getByPath } from "@/api/mains";
import CommonSelect from "@/components/KingForm/components/CommonSelect.vue";
import edit from "./components/jobEdit.vue";
import detail from "./components/jobDetail.vue";
import hitory from "./components/jobHitory.vue";
import { operateType } from "@/plugins/commonType.enum";
import { confirm, succMsg } from "@/utils/MessageUtils";
import { ElLoading } from "element-plus";

const list = ref([{ id: "", jobName: "", cronExpression: "", status: 0 }]);
const listLoading = ref(false);

const editRef = ref();
const detailRef = ref();
const hitoryRef = ref();

const queryForm = reactive({
  LIKE_jobName: "",
  EQ_jobGroup: "",
  EQ_status: "",
  pageNum: 1,
  pageSize: -1
});

const fetchTableData = async () => {
  listLoading.value = true;
  const res: any = await postRequest("monitor/job/query", queryForm);
  if (res.code == 200) {
    list.value = res.data.rows;
  }
  listLoading.value = false;
};
const queryData = () => {
  queryForm.pageNum = 1;
  fetchTableData();
};
const handlePlay = (row: any) => {
  confirm(`确定要执行定时任务"${row.jobName}"吗?`, async function () {
    const res: any = await postRequest(`monitor/job/run`, {
      id: row.id,
      jobGroup: row.jobGroup
    });
    if (res.code === 200) {
      succMsg(res.msg);
      fetchTableData();
    }
  });
};

//新增
const handleAdd = () => {
  editRef.value.showDialog({}, operateType.ADD);
};

//编辑
const handleEdit = (row: any) => {
  editRef.value.showDialog(row, operateType.EDIT);
};

//删除
const handleDelete = (row: any) => {
  confirm("你确定要删除当前项吗", async () => {
    const loading = ElLoading.service({
      lock: true,
      text: "删除中，请稍候...",
      background: "rgba(0, 0, 0, 0.7)"
    });
    const res: any = await getByPath("monitor/job/delete", row.id);
    loading.close();
    if (res.code == 200) {
      succMsg(res.msg);
      fetchTableData();
    }
  });
};

//查看执行日志
const handleHistory = (row: any) => {
  hitoryRef.value.showDialog(row);
};

onMounted(() => {
  fetchTableData();
});
</script>

<style lang="scss" scoped>
.task-management-container {
  padding: 0 !important;
  background: $base-color-background !important;
  .page-header {
    display: flex;
    align-items: center;
    padding: $base-padding $base-padding 0 $base-padding;
    margin-bottom: $base-margin;
    background: var(--el-color-white);
    border: 1px solid #ebeef5;
    :deep() {
      .el-form-item__content {
        width: 221px !important;
        .el-select,
        .el-input,
        .el-date-editor,
        .el-checkbox-group {
          width: 100%;
        }
      }
    }
  }
  :deep() {
    .el-card {
      .el-card__header {
        position: relative;
        .card-header-tag {
          position: absolute;
          top: 15px;
          right: $base-margin;
        }
        > div > span {
          display: flex;
          align-items: center;
          i {
            margin-right: 3px;
          }
        }
      }
      .el-card__body {
        position: relative;
        .card-footer-tag {
          position: absolute;
          right: $base-margin;
          bottom: 15px;
        }
      }
    }
  }
  .task-item {
    min-height: 255px;
    max-height: 255px;
    &-image {
      display: block;
      width: 150px;
      margin: 0 auto 20px;
    }
    &-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-top: 5px;
      text-align: right;
      border-top: 1px solid #ebeef5;
      .el-button--mini.is-circle {
        i {
          margin-right: 0 !important;
          font-size: 14px;
        }
      }
    }
  }
  .task-add {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 255px;
    max-height: 255px;
    color: var(--el-color-primary);
    text-align: center;
    cursor: pointer;
    i {
      font-size: 30px;
    }
    p {
      margin-top: 20px;
      font-size: 12px;
    }
  }
}
</style>
